<script setup lang='ts'>
  import { inject } from 'vue'
  // inject(名字
  // 获取分隔符
  const separator = inject('separator')
  defineProps<{
    to?: string //要跳转的位置
  }>()
</script>

<template>
  <div class="xtx-bread-item">
    <!-- 是否需要跳转 -->
    <router-link v-if="to" :to="to"><slot></slot></router-link>
    <slot v-else></slot>

    <!-- 分隔符从祖先来的 -->
    <!-- 分隔符 -->
    <i v-if="separator">{{ separator }}</i>
    <i v-else class="iconfont icon-angle-right"></i>
  </div>
</template>

<style lang='less' scoped>
  .xtx-bread-item {
  i {
    margin: 0 6px;
    font-size: 10px;
  }
  // 最后一个i隐藏
  &:nth-last-of-type(1) {
    i {
      display: none;
    }
  }
}
</style>